<template>
    <div id="temp">
        <!--图片分类部分  -->
        <div id="category">
            <ul>
                <li @click="getImgList(0)">
                    全部
                </li>
                <li v-for="(item,index) in categories" :key="index" @click="getImgList(item.id)">
                    {{item.title}}
                </li>
            </ul>
        </div>
    
        <!--图片列表部分  -->
        <div id="imglist">
            <ul>
                <li v-for="(item,index) in imageList" :key="index">
                    <router-link v-bind='{to:"/photo/photoinfo/"+item.id}'>
                        <img v-lazy="item.img_url">
                        <div id="desc">
                            <h5>{{item.title}}</h5>
                            <p>{{item.zhaiyao}}</p>
                        </div>
                    </router-link>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>

//导入全局域名
import common from '../../kits/common.js';

//导入提示小组件
import { Toast } from 'mint-ui';

export default {
    data() {
        return {
            categories: [],
            imageList: [],
            id: 999
        }
    },
    created() {
        this.getCategories();
        this.getImgList(0);

    },
    updated(){ //在数据更新后获得元素
        this.setUlWidth();
    },
    methods: {
        //获得图片分类
        getCategories() {
            this.$http.get(common.urlHost + "/api/getimgcategory")
                .then(function (res) {
                    if (res.body.status != 0) {
                        Toast({
                            message: res.body.message,
                            duration: 3000
                        });
                    }
                    this.categories = res.body.message;
                })
        },

        //设置ul宽度
        setUlWidth() {
            var lis = document.querySelectorAll("#category li"),
                ul = document.querySelector("#category ul"),
                ulWidth = 0;

            lis.forEach(function (v) {
                ulWidth += v.offsetWidth;
            });

            ul.style.width = (ulWidth + 20) + "px";
        },

        //获得图片列表
        getImgList(id) {
            if (id == this.id) return;  //如果点击的和上次点击的相同 直接return 不去请求数据 因为数据与上次的一样

            this.id = id; //将点击的id存在组件对象的属性id里面

            this.$http.get("http://182.254.146.100:8899/api/getimages/" + id)
                .then(function (res) {
                    if (res.body.status != 0) {
                        Toast({
                            message: res.body.message,
                            duration: 3000
                        });
                    }
                    this.imageList = res.body.message;
                })
        }
    }
}
</script>
<style scoped>
#category {
    width: 100%;
    height: 45px;
    box-sizing: border-box;
    overflow-x: auto;
    background-color: #dedede;
}

#imglist ul {
    margin: 0;
    padding: 0;
}

#imglist li {
    list-style: none;
    position: relative;
}

#imglist li img {
    width: 100%;
}

#desc {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;    
    box-sizing:border-box;
    padding:5px 10px;
}

#desc h5 {
    color: #fff;
    font-weight: 900;
}

#desc p {
    font-size: 10px;
    color: #fff;
}


/*懒加载图片  */

image[lazy=loading] {
    width: 40px;
    height: 300px;
    margin: auto;
}

























/* 隐藏滚动条 */

#category::-webkit-scrollbar {
    display: none;
}

#category ul {
    width: 1000px;
    height: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
    line-height: 45px;
}


#category ul li {
    display: inline-block;
    padding: 0 10px;
    color: #26a2ff;
    height: 100%;
    box-sizing: border-box;
}
</style>


